<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <!-- <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="姓名：">
              <el-input v-model="person.name" style="width:200px"></el-input>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="所属组织名称：">
              <el-select v-model="person.client" placeholder>
                <el-option
                  v-for="item in person.clientList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="personQuery"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="handleAdd"
              >新 增</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      v-loading="loading"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <el-table-column
        prop="ROADLEVEL"
        label="道路等级"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="CLIENT_NAME"
        label="所属组织名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WORKNUMBER"
        label="作业次数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WORKTYPE"
        label="作业类型"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog
      :title="addDialogTitle"
      :visible.sync="isVisibleEdit"
      width="50%"
      :modal="false"
    >
      <el-form ref="form" :model="form" label-width="100px" class="flex">
        <el-form-item
          label="道路等级："
          class="wid50"
          v-if="this.addDialogTitle === '新增作业规则信息'"
        >
          <el-select v-model="form.ROADLEVEL" placeholder>
            <el-option
              v-for="item in person.levelList"
              :key="item.levelNAME"
              :label="item.levelNAME"
              :value="item.levelNAME"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="作业类型："
          class="wid50"
          v-if="this.addDialogTitle === '新增作业规则信息'"
        >
          <el-select v-model="form.WORKTYPE" placeholder>
            <el-option
              v-for="item in person.workTypeList"
              :key="item.Type"
              :label="item.Type"
              :value="item.Type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作业次数：" class="wid50">
          <el-input
            v-model="form.WORKNUMBER"
            type="number"
            placeholder="请输入作业次数"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="组织机构："
          v-if="this.addDialogTitle === '新增作业规则信息'"
        >
          <el-select v-model="form.CLIENT_NO" placeholder>
            <el-option
              v-for="item in person.clientList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
// import { formatDate } from '@/common/js/date.js'
// import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      loading: false,
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      // 人员管理
      person: {
        NAME: '',
        client: '',
        clientList: [],
        team: '',
        teamList: [],
        levelList: [{
          levelNO: '1',
          levelNAME: '一级',
        }, {
          levelNO: '2',
          levelNAME: '二级',
        }, {
          levelNO: '3',
          levelNAME: '三级',
        }, {
          levelNO: '4',
          levelNAME: '四级',
        }],
        workTypeList: [{
          Type: '洗扫'
        }, {
          Type: '洒水'
        }, {
          Type: '干扫'
        }, {
          Type: '冲洗'
        }],
        useList: [{
          useNO: '0',
          useNAME: '否',
        }, {
          useNO: '1',
          useNAME: '是',
        }]
      },
      // 新增人员
      newPersonForm: {
        show: false,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      },
      tableData: [],
      originalData: [],
      areaList: [],
      personSettingForm: {
        show: false
      },
      form: {},
      isVisibleEdit: false,
    }
  },
  created () {
    this.getClientList(); 
    this.getlistdata();
  },
  methods: {
    async getClientList () {
      var url = 'Vehicle/GetGroupList?ClientNo=' + localStorage.getItem('CLIENT_NO') // zxdata
      let { data } = await this.$Http.get(url)
      this.person.clientList = data
      // this.person.clientList.unshift({"CLIENT_NO":"0","CLIENT_NAME":"全部"})
      // this.attendanceMonth.records.teamList = data
    },
    async getlistdata () {
      this.loading = true
      var url = 'Vehicle/GetRuleRoadWorkNumInfoPB?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.originalData = data
      this.personQuery()
    },
    // 人员管理查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      const { client } = this.person
      if (client) this.tableData = this.tableData.filter(item => item.CLIENT_NO.includes(client))
      this.loading = false
    },
    // 新增作业规则
    handleAdd () {
      this.addDialogTitle = '新增作业规则信息'
      //清空编辑框
      this.form = {}
      //展示窗口
      this.isVisibleEdit = true;
    },
    // 打开编辑窗口
    handleEdit (index, row) {
      this.form = Object.assign({}, row);
      this.addDialogTitle = '编辑作业规则信息'
      this.isVisibleEdit = true;
    },
    // 点击保存，判断是新增还是编辑操作
    handleSubmit () {
      if (this.addDialogTitle == '新增作业规则信息') {
        this.saveAdd()
      } else {
        this.saveEdit()
      }
    },
    // 新增保存
    async saveAdd () {
      // console.log(this.addform)
      this.$axios({
        url: 'Vehicle/SaveRuleRoadWorkNumInfoPB',
        method: 'post',
        data: {
          RULEID: '-1',
          ROADLEVEL: this.form.ROADLEVEL,
          WORKTYPE: this.form.WORKTYPE,
          WORKNUMBER: this.form.WORKNUMBER,
          CLIENT_NO: this.form.CLIENT_NO,
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功');
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('新增失败');
        }
      })

    },
    // 保存编辑
    async saveEdit () {
      this.$axios({
        url: 'Vehicle/SaveRuleRoadWorkNumInfoPB',
        method: 'post',
        data: {
          RULEID: this.form.RULEID,
          ROADLEVEL: this.form.ROADLEVEL,
          WORKTYPE: this.form.WORKTYPE,
          WORKNUMBER: this.form.WORKNUMBER,
          CLIENT_NO: this.form.CLIENT_NO,
        },

      }).then((res) => {
        console.log(this.data)
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('编辑成功');
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('编辑失败');
        }
      })
    },
    // 删除
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          RULEID: row.RULEID,
        }
        const { data } = await this.$Http.get('Vehicle/DeleteRuleRoadWorkNumInfoPB', { params })
        if (data.IsSucess) {
          this.$message.success('删除成功')
          this.isVisibleEdit = false
          this.getlistdata()
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
        this.isVisibleEdit = false
      }

    },
    // async handleEdit (index, row) {
    //   this.personSettingForm = {
    //     show: true,
    //     name: row.姓名,
    //     team: row.清扫队,
    //     group: row.班组,
    //     setTime: row.设置时间,
    //     town: row.镇,
    //     village: row.村,
    //     area: row.区域,
    //     CLIENT_NO: row.CLIENT_NO
    //   }

    //   const { data } = await this.$Http.get('/DataListCompany/GetAreaByVillageApi?village=' + row.村)
    //   this.personSettingForm.areaList = data
    //   this.getAreaList()
    // },handleEdit (index, row) {
    //   this.personSettingForm = {
    //     show: true,
    //     name: row.姓名,
    //     team: row.清扫队,
    //     group: row.班组,
    //     setTime: row.设置时间,
    //     town: row.镇,
    //     village: row.村,
    //     area: row.区域,
    //     CLIENT_NO: row.CLIENT_NO
    //   }

    //   const { data } = await this.$Http.get('/DataListCompany/GetAreaByVillageApi?village=' + row.村)
    //   this.personSettingForm.areaList = data
    //   this.getAreaList()
    // },
    // 获取区域列表
    async getAreaList () {
      const areaData = await this.$Http.get('/DataListCompany/GetRoadByAreaApi?AreaName=' + this.personSettingForm.area)
      this.areaList = areaData.data
    },
    // 保存人员信息
    async savePerson () {
      const params = {
        ClientNo: this.personSettingForm.CLIENT_NO,
        Area: this.personSettingForm.area,
        StaffName: this.personSettingForm.name
      }
      await this.$Http.get('/DataListCompany/SaveStaffRoadApi', { params })
      this.personSettingForm.show = false
      // 刷新列表信息
      this.getlistdata()
      // console.log(data);
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style scoped lang='less'>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.new_person {
  .el-form {
    width: 300px;
    // height: 180px;
    margin: 10px auto;
    background-color: #dfe8f6;
    .el-form-item {
      margin-bottom: 20px;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      // padding-top: 10px;
      .el-button {
        margin: 0 10px;
        /deep/span {
          padding: 0 5px;
        }
      }
    }
  }
}
.box {
  display: block;
  position: relative;
  height: 6.771vw;
  overflow: auto;
}
.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.marquee_top {
  transition: all 1s;
  margin-top: -1.563vw;
}
.marquee_list li {
  height: 1.354vw;
  line-height: 1.354vw;
}
.marquee_list li span {
  padding: 0.26vw;
  font-size: 0.729vw;
}
</style>